<template>
	<view>
		<view style="position: sticky; left: 0; top: 0; z-index: 999; background: #fff;">
			<view class="fl-s-s" style="padding: 28rpx 32rpx; background: #FFFFFF;" v-if="mch_info">
				<view class="fr-s-c">
					<image :src="mch_info.logo" style="width: 120rpx; height: 120rpx; border-radius: 50%;"></image>
					<view class="fl-b-s m-l-20">
						<text class="fs-28 c-00 fm-ali">{{mch_info.name}}</text>
						<text class="fs-28 c-00 fm-ali m-t-30" style="color: #fff; background: #fa360a; padding: 5rpx 15rpx; border-radius: 8rpx;">进店逛逛</text>
					</view>	
				</view>
			</view>
			<u-gap height="12" bg-color="#f4f4f4" v-if="mch_info"></u-gap>
		</view>
		<!-- 顶部信息 -->
		<view class="list w-1 fr-b-s p-r-30">
			<view class="list-item fl-s-s" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
				<image :src="item.thumb" mode="aspectFill" style="width: 332rpx; height: 282rpx;"></image>
				<view class="fr-s-c w-1 relative" style="height: 32rpx; padding-left: 20rpx; margin-top: -18rpx;">
					<view class="fr-c label" v-if="item.is_new==1">新品</view>
					<view class="fr-c label" v-if="item.type_i==1">推荐</view>
				</view>
				<text class="m-t-10 w-1 text-line-2 c-00 fs-30 fm-ali" style="padding: 0 20rpx;">{{item.title}}</text>
			</view>
		</view>
		<view class="m-t-250" v-if="nodata">
			<u-empty mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mch_info:'',
				list:[],
				nodata:false,
				page:1,
				count:0
			}
		},
		onLoad(e) {
			this.mch_info = JSON.parse(decodeURIComponent(e.info))
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		},
		onReachBottom() {
			if(this.list.length<this.count){
				this.page++
				this.getList()
			}
		},
		methods: {
			getList(){
				this.$get({
					url:'/homepage/MchGoods',
					data:{
						mch_id:this.mch_info.id,
						page:this.page,
					}
				}).then(res=>{
					this.list = this.page==1?res.data.data:[...this.list,...res.data.data]
					this.nodata = !this.list.length
					this.count = res.data.count
				}).catch(err=>{
					this.list = []
					this.nodata = !this.list.length
					this.count = 0
				})
			},
			// 商品详情
			toDetail(id){
				if(!uni.getStorageSync('user_id')){
					uni.navigateTo({
						url:"/pages/Login/Login"
					})
					return
				}
				uni.navigateTo({
					url:'/pages/Home/GoodsDetail/GoodsDetail?id='+id
				})
			},
		}
	}
</script>

<style>
.list {
		padding-top: 20rpx;
		flex-wrap: wrap;
	}

	.list-item {
		width: 332rpx;
		height: 420rpx;
		background: #FDFBFB;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
	}

	.label {
		height: 32rpx;
		background: linear-gradient(270deg, #EBC66D 0%, #EFDDB2 100%);
		border-radius: 4rpx;
		font-size: 20rpx;
		font-family: Alibaba;
		color: #FFFFFF;
		padding: 0 20rpx;
		margin-right: 8rpx;
	}
</style>
